<template>
  <p-form-model :model="form" :rules="rules" layout="inline">
    <p-form-model-item :label="`${PAGE_TYPE[pageType]}名称`">
      <p-input v-model="form.name" placeholder="请输入" />
    </p-form-model-item>
    <p-form-model-item label="当前状态">
      <SelectDefault v-model="form.currStatus" code="state" />
    </p-form-model-item>
    <p-form-model-item label="当前节点">
      <SelectDefault v-model="form.nodeCode" code="m3_forecast_node" />
    </p-form-model-item>
    <p-form-model-item label="销售组织">
      <SelectOrg v-model="form.salesOrganization" />
    </p-form-model-item>
    <p-form-model-item label="长度区间">
      <MonthRangPicker
        :start.sync="form.startTime"
        :end.sync="form.endTime"
        :allow-clear="true"
      />
    </p-form-model-item>
    <p-button type="primary" class="btn-search" @click="handleSearch">
      搜索
    </p-button>
    <p-button @click="handleReset">重置</p-button>
  </p-form-model>
</template>
<script>
import { FORECAST_TYPE as PAGE_TYPE } from '@/constants/index';

const defaultForm = {
  name: '',
  currStatus: '',
  nodeCode: '',
  salesOrganization: '',
  startTime: undefined,
  endTime: undefined,
};

export default {
  props: {
    pageType: {
      type: String,
      default: 'M9',
    },
  },
  data() {
    this.PAGE_TYPE = PAGE_TYPE;
    return {
      form: {
        ...defaultForm,
      },
    };
  },
  methods: {
    handleSearch() {
      this.$emit('search', this.form);
    },
    handleReset() {
      this.form = { ...defaultForm };
      this.$emit('search', this.form);
    },
  },
};
</script>

<style lang="less" scoped>
.poros-form {
  box-sizing: border-box;
  background-color: #f7f7f8;
  padding: 10px;
  padding-bottom: 0px;
  width: 100%;
}
.poros-form-item {
  width: 30%;
  margin-bottom: 10px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 70px);
}
.btn-search {
  margin-right: 16px;
}
</style>
